<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>计数器2.0</title>
</head>


<body>
    <div id="app">


        <input @keydown="keydownevent" @keypress="keypressevnet" @keyup="keyupevent" />
        <div @click.middle="ClickEvent">按钮</div>

        <!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
        <button @click="onClick">即使 Alt 或 Shift 被一同按下时也会触发</button>

        <!-- 有且只有 Ctrl 被按下的时候才触发 -->
        <button @click.ctrl.exact="onCtrlClick">onCtrlClick</button>

        <!-- 没有任何系统修饰符被按下的时候才触发 -->
        <button @click.exact="onClickexact">没有任何系统修饰符被按下的时候才触发</button>

        <div id="basic-event">
            <button @click="counter *= 2">Add 1</button>
            <p>The button above has been clicked {{ counter }} times.</p>
          </div>
    </div>
</body>
<script src="https://unpkg.com/vue@next"></script>
<script>
    const app = {
        data() {
            return {
                counter: 0,
                message: 'hello'
            }
        },
        methods: {
            keydownevent() {
                console.log("keydownevent --> ")
            },
            keypressevnet() {
                console.log("keypressevnet --> ")
            },
            keyupevent() {
                console.log("keyupevent --> ")
            },
            onClick() {
                alert("你好")
            },
            onCtrlClick(){
                console.log("onCtrlClick触发");
                alert("你好")
            },
            onClickexact(){
                console.log("onClickexact触发")
            }

        },

    }
    Vue.createApp(app).mount("#app");
</script>

</html>